<template>
  <div class="tabBar" v-if="tabs">
    <cube-tab-bar
      :showSlider="true"
      :data="tabs"
      v-model="selectedLabel"
      ref="tabBar"
      class="border-bottom-1px"
      :useTransition="false"
    ></cube-tab-bar>
    <!-- <div class="slide-wrapper">
      <cube-slide
        :loop="false"
        :auto-play="false"
        :show-dots="false"
        :initial-index="index"
        ref="slide"
        :options="slideOptions"
        @scroll="onScroll"
        @change="onChange"
      >
        <cube-slide-item v-for="(tab,index) in tabs" :key="index">
       
          <component ref="component" :is="tab.component" :data="tab.data"></component>
        </cube-slide-item>
      </cube-slide>
    </div>-->
    <div class="slide-wrapper">
      <cube-slide
        :loop="false"
        :auto-play="false"
        :show-dots="false"
        :initial-index="index"
        ref="slide"
        :options="slideOptions"
        @scroll="onScroll"
        @change="onChange"
      >
        <cube-slide-item v-for="(tab,index) in tabs" :key="index">
          <component ref="component" :is="tab.component" :data="tab.data"></component>
        </cube-slide-item>
      </cube-slide>
    </div>
  </div>
</template>
<script>
export default {
  name: "tabBar",
  props: {
    tabs: {
      type: Array,
      default() {
        return [];
      }
    },
    initialIndex: {
      type: Number,
      default: 0
    }
  },

  data() {
    return {
      label: "",
      active: "",
      index: 0,
      slideOptions: {
        //监听滚动事件
        listenScroll: true,
        probeType: 3, // 0 不派发scroll事件，1：非实时；2：滑动过程中；3：不仅在屏幕滑动的过程中，而且momentum 滚动动画运行过程中实时派发
        directionLockThreshold: 0 //设置竖向滚动
      }
    };
  },
  computed: {
    selectedLabel: {
      get() {
        // if(){}
        return this.tabs[this.index].label;
      },
      set(newVal) {
        this.index = this.tabs.findIndex(value => {
          return value.label === newVal;
        });
      }
    }
  },
  mounted() {
    this.onChange(this.index);
  },
  methods: {
    onScroll(pos) {
      const tabBarWidth = this.$refs.tabBar.$el.clientWidth;
      const slideWidth = this.$refs.slide.slide.scrollerWidth;
      const transform = (-pos.x / slideWidth) * tabBarWidth;
      this.$refs.tabBar.setSliderTransform(transform);
    },
    onChange(current) {
      this.index = current;
      const instance = this.$refs.component[current];
      if (instance && instance.fetch) {
        instance.fetch();
      }
    }
  }
};
</script>

<style lang="stylus" rel="stylesheet/stylus">
.tabBar {
  position: relative;
  text-align: left;
  height: 100%;
  display: flex;
  flex-direction: column;

  .slide-wrapper {
    flex: 1;
    overflow: hidden;
  }

  .scroll-nav-wrapper {
    position: absolute;
    width: 100%;
    top: 0;
    left: 0;
    bottom: 48px;
  }

  >>> .cube-scroll-nav-bar {
    width: 80px;
    white-space: normal;
    overflow: hidden;
  }

  >>> .cube-scroll-nav-bar-item {
    padding: 0 10px;
    display: flex;
    align-items: center;
    height: 56px;
    line-height: 14px;
    font-size: $fontsize-small;
    background: $color-background-ssss;

    .text {
      flex: 1;
      position: relative;
    }

    .num {
      position: absolute;
      right: -8px;
      top: -10px;
    }

    .support-ico {
      display: inline-block;
      vertical-align: top;
      margin-right: 4px;
    }
  }

  >>> .cube-scroll-nav-bar-item_active {
    background: $color-white;
    color: $color-dark-grey;
  }

  >>> .cube-scroll-nav-panel-title {
    padding-left: 14px;
    height: 26px;
    line-height: 26px;
    border-left: 2px solid $color-col-line;
    font-size: $fontsize-small;
    color: $color-grey;
    background: $color-background-ssss;
  }

  .food-item {
    display: flex;
    margin: 18px;
    padding-bottom: 18px;
    position: relative;

    &:last-child {
      border-none();
      margin-bottom: 0;
    }

    .icon {
      flex: 0 0 57px;
      margin-right: 10px;

      img {
        height: auto;
      }
    }

    .content {
      flex: 1;

      .name {
        margin: 2px 0 8px 0;
        height: 14px;
        line-height: 14px;
        font-size: $fontsize-medium;
        color: $color-dark-grey;
      }

      .desc, .extra {
        line-height: 10px;
        font-size: $fontsize-small-s;
        color: $color-light-grey;
      }

      .desc {
        line-height: 12px;
        margin-bottom: 8px;
      }

      .extra {
        .count {
          margin-right: 12px;
        }
      }

      .price {
        font-weight: 700;
        line-height: 24px;

        .now {
          margin-right: 8px;
          font-size: $fontsize-medium;
          color: $color-red;
        }

        .old {
          text-decoration: line-through;
          font-size: $fontsize-small-s;
          color: $color-light-grey;
        }
      }
    }

    .cart-control-wrapper {
      position: absolute;
      right: 0;
      bottom: 12px;
    }
  }

 

  .cube-tab_active {
    color: #f01414;
  }

  .cube-rate-item {
    width: 15px !important;
    margin-right: 6px !important;
  }
}
</style>
